<template>
    <div>
            <!-- 
                el-menu
                default-active  当前激活菜单的 index
                background-color 菜单的背景色（仅支持 hex 格式）
                text-color 菜单的文字颜色（仅支持 hex 格式）
                active-text-color 当前激活菜单的文字颜色（仅支持 hex 格式）
                unique-opened	是否只保持一个子菜单的展开
                router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
             -->
             <el-menu
            :default-active="defaultActive"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            unique-opened
            router
          >
          <el-menu-item index="/home">
              <i class="el-icon-s-help"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/menu">菜单管理</el-menu-item>
              <el-menu-item index="/role">角色管理</el-menu-item>
              <el-menu-item index="/user">管理员管理</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-goods"></i>
                <span>商城管理</span>
              </template>
              <el-menu-item index="/cate">商品分类</el-menu-item>
              <el-menu-item index="/goodsspace">商品规格</el-menu-item>
              <el-menu-item index="goods">商品管理</el-menu-item>
              <el-menu-item index="/member">会员管理</el-menu-item>
              <el-menu-item index="/pic">轮播图管理</el-menu-item>
              <el-menu-item index="/seckill">秒杀活动</el-menu-item>
            </el-submenu>
          </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            defaultActive:'/home'
        };
    },
    mounted(){
        // console.log(this.$route)
        this.defaultActive = this.$route.path
    }
};
</script>

<style lang="less"  scoped>
.el-menu{
    min-height:700px
}
</style>
